<template>
    <div class="header__nav">

      <van-nav-bar
          v-bind="$attrs"
        safe-area-inset-top
        :title="props?.titelText ? props?.titelText : route.meta ? route.meta.name : ''"
        @click-left="onClickLeft"
        @click-right="onClickRight"
          style="background-color: #56bd7c;--van-nav-bar-title-text-color:#fff"
      >
        <template #left>
          <van-icon
            v-if="data?.leftArrowtag"
            class="left_icon"
            name="arrow-left"
          />
        </template>
        <template #right>
          <slot name="right"></slot>
        </template>
      </van-nav-bar>
    </div>
  </template>
  
  <script setup name="headerNav">
  
  const router = useRouter();
  const route = useRoute();
  const emit = defineEmits(["goBack"]);
  const props = defineProps({
    leftArrow: {
      type: Boolean,
      default: true,
    },
    slefBack: {
      type: Boolean,
      default: false,
    },
    titelText: {
      type: String,
      default: "",
    },
  });
  const data = reactive({
    leftArrowtag: props?.leftArrow,
    titelTextvalue: props?.titelText ? props?.titelText : route.meta ? route.meta.name : ""  ,
  });
  document.title = route.meta.name;
  watch(route, () => {
    document.title = route.meta.name;
  },{deep: true});
  // 左边返回
  const onClickLeft = () => {
    if (props?.leftArrow) {
      if (props?.slefBack) {
        emit("goBack");
      } else {
        router.go(-1);
      }
    }
  };
  
  // 右边返回
  const onClickRight = () => {};
  </script>
  <style lang="less" scpoed>
  .header__nav {
    position: fixed;
    top: 0;
    width: 100%;
    .left_icon {
      color: #ffff !important;
    }
  }
  </style>